<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>酒店后台管理系统</title>
    <link href="/resources/hotel/css/style.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        input {
            border: #00a4ac 1px solid;
            height: 30px;
        }

        a {
            cursor: pointer;
        }

        .paginList li {
            margin-left: 50px;
        }
    </style>

    <script type="text/javascript" src="/resources/hotel/js/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".click").click(function () {
                $(".tip").fadeIn(200);
            });

            $(".tiptop a").click(function () {
                $(".tip").fadeOut(200);
            });

            $(".sure").click(function () {
                $(".tip").fadeOut(100);
            });

            $(".cancel").click(function () {
                $(".tip").fadeOut(100);
            });

        });
    </script>
</head>

<body>
<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">首页</a></li>
        <li><a href="#">酒店信息管理</a></li>
        <li><a href="#">房间信息</a></li>
    </ul>
</div>

<div class="rightinfo">

    <div class="tools">
        <ul class="toolbar">
            <li id="addButton"><span><img src="/resources/hotel/images/t01.png"/></span>添加</li>
        </ul>
        <select class="dingbu" name="rType" id="select">

        </select>
    </div>

    <table class="tablelist">
        <thead>
        <tr>
            <th>房间编号</th>
            <th>房间名称</th>
            <th>房间类型</th>
            <th>房间描述</th>
            <th>库存</th>
            <th>原价</th>
            <th>现价</th>
            <th>是否支持优惠券</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>

    <div class="pagin">
        <div class="message">共 <i class="blue" id="countData">0</i> 条记录，共 <i class="blue" id="countPage">0</i> 页，当前显示第&nbsp;<i
                class="blue" id="nowPage">0&nbsp;</i>页
        </div>
        <ul class="paginList" style="margin-right: 50px;">
            <li class="paginItem"><span><a href="#" style="width: 70px;" id="upPage" onclick="flip(-1)">上一页</a></span>
            </li>
            <li class="paginItem">
                <input id="finPageBox" type="text" style="width: 60px;height: 25px; "
                       onkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/"/>
                <button style="padding: 5px 10px;font-size: 12px;" id="findPageButton" onclick="flip(0)">跳转</button>
            </li>
            <li class="paginItem"><span><a href="#" style="width: 70px;border: solid 1px lavender;" id="nextPage"
                                           onclick="flip(1)" href="findPageButton">下一页</a></span></li>
        </ul>
    </div>

    <div class="tip">
        <div class="tiptop"><span>添加信息</span><a></a></div>

        <div class="tipinfo">
            <div class="tipright">
                <p>房间编号：</p><input name="" type="text" class="dfinput"/>
                <p>房间名称：</p><input name="" type="text" class="dfinput"/>
                <p>类型：</p><input name="" type="text" class="dfinput"/>
                <p>描述：</p><input name="" type="text" class="dfinput"/>
                <p>库存：</p><input name="" type="text" class="dfinput"/>
                <p>原价：</p><input name="" type="text" class="dfinput"/>
                <p>现价：</p><input name="" type="text" class="dfinput"/>
            </div>
        </div>

        <div class="tipbtn">
            <input name="" type="button" class="sure" value="确定"/>&nbsp;
            <input name="" type="button" class="cancel" value="取消"/>
        </div>

    </div>
</div>
<form id="addForm">
    <div class="tip" style="height: 500px;width: 380px;display: none;" id="addDiv">
        <div class="tiptop"><span>添加房间信息</span><a></a></div>
        <div class="margin-left: 10px;">
            <div style="float: left;">
                &nbsp;&nbsp;<p>房间名称：</p><input name="rName" type="text" class="dfinput" value="请输入内容"
                                               onfocus="javascript:if(this.value=='请输入内容')this.value='';"><br/>
                &nbsp;&nbsp;<p>类型：</p><!--<input name="" type="text" class="dfinput" />-->
                &nbsp;&nbsp;<select class="dingbu" name="rType.rtId"></select><br/>
                &nbsp;&nbsp;<p>描述：</p><input name="rDesc" type="text" class="dfinput"
                                             onfocus="javascript:if(this.value=='请输入内容')this.value='';"><br/>
                &nbsp;&nbsp; <p>库存：</p><input name="rRepertory" type="text" class="dfinput"
                                              onfocus="javascript:if(this.value=='请输入内容')this.value='';"><br/>
                &nbsp;&nbsp;<p>原价：</p><input name="rOriginalPrice" type="text" class="dfinput"
                                             onfocus="javascript:if(this.value=='请输入内容')this.value='';"><br/>
                &nbsp;&nbsp; <p>现价：</p><input name="rPresentPrice" type="text" class="dfinput"
                                              onfocus="javascript:if(this.value=='请输入内容')this.value='';"><br/>
                &nbsp;&nbsp; <p>是否支持优惠券：</p>       <select name="rAllowDiscount">
                <option value="0">否</option>
                <option value="1">是</option>
            </select>
            </div>
        </div>

        <div class="tipbtn" style="position: absolute;top:-5px;">
            <input name="" type="button" class="sure" value="确定添加" id="addOK"/>&nbsp;
            <input name="" type="button" class="cancel" value="取消" id="addno"/>
        </div>
    </div>
</form>


<form id="modifyForm">
    <div class="tip" style="height: 600px;width: 400px;background-color: white;position: absolute;left: 400px;top: 50px;display: none;" id="modifyDiv">
        <div class="tiptop"><span>修改房间信息</span><a></a></div>
        <div style="margin-left: 10px;">
            <div style="float: left;">
                <div class="tipright">
                    <p>房间编号：</p><input name="rId" type="text" class="dfinput" readonly unselectable="on" id="roomNum"/>
                    <p>房间名称：</p><input name="rName" type="text" class="dfinput" id="trDesc"/>
                    <p>类型：</p><select id="content" name="rType.rtId" class="dingbu"></select>
                    <p>描述：</p><input name="rDesc" type="text" class="dfinput" id="trDesc"/>
                    <p>库存：</p><input name="rRepertory" type="text" class="dfinput" id="trDesc"/>
                    <p>原价：</p><input name="rOriginalPrice" type="text" class="dfinput" id="trDesc"/>
                    <p>现价：</p><input name="rPresentPrice" type="text" class="dfinput" id="trDesc"/>
                    <p>是否支持优惠券：</p>
                    <select name="rAllowDiscount">
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
            </div>
            <div class="tipbtn" style="position: absolute;top: 115px;">
                <input name="" type="button" class="sure" value="确定修改" id="mook"/>
                <input name="" type="button" class="cancel" value="取消" id="mono"/>
            </div>
        </div>
    </div>
</form>

<!--删除选项框-->
<div class="tip" id="deleteDiv" style="height: 350px;">
    <div class="tiptop"><span>提示信息</span><a></a></div>
    <div class="tipinfo">
        <span><img src="/resources/hotel/images/ticon.png" /></span>
        <div class="tipright">
            <p>是否确认对信息的删除 ？</p>
            <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
        </div>
    </div>
    <div class="tipbtn" style="margin: 100px;">
        <input name="" type="button"  class="sure" value="确定" id="deleteOK"/>&nbsp;
        <input name="" type="button"  class="cancel" value="取消" />
    </div>
</div>
    <script type="text/javascript">
        $('.tablelist tbody tr:odd').addClass('odd');
    </script>


    <script>
        //当前页数
        var nowPage;
        //总页数
        var countPage;
        //获取酒店所有订单信息
        getPage(1);//页面加载，获取订单第一页
        /**
         * 翻页
         * @param flip -1上一页 0跳转页 1下一页
         */
        function flip(flip) {
            switch (flip) {
                case -1:
                    if (nowPage - 1 > 0) {
                        nowPage = nowPage - 1;
                        getPage(nowPage);//根据页码查询已完成订单
                    } else {
                        alert("已经是第一页了");
                    }
                    break;
                case 0:
                    var findPageNum = $("#finPageBox").val();
                    if (findPageNum > 0 && findPageNum <= countPage) {
                        getPage(findPageNum);
                    } else {
                        alert("页码错误!");
                    }
                    break;
                case 1:
                    if ((nowPage + 1) * 1 <= countPage) {
                        nowPage = nowPage + 1;
                        getPage(nowPage);//根据页码查询已完成订单
                    } else {
                        alert("已经是最后一页了");
                    }

                    break;
                default:
                    alert("翻页请求错误！");
            }
        }
        //翻页的方法
        function getPage(pageIndex, rtId) {
            $.ajax({
                type: "get",
                url: "http://localhost:8080/roomController/selectRoomsByHotelIdAndRoonTypeId",
                data: {
                    "status": -1,
                    "currentPage": pageIndex,
                    "rType.rtId": rtId
                },
                dataType: "json",
                success: function (data) {
                    nowPage = pageIndex;//设置当前页数
                    $("#nowPage").html(nowPage);
                    $("#countPage").html(data.pageBean.totalPage);//设置总页数
                    $("#countData").html(data.pageBean.totalCount);//设置总数据条数
                    countPage = data.pageBean.totalPage;

                    if (data.pageBean.list.length > 0) {
                        var tbody = $("#tbody");
                        tbody.html("");//清除以前的数据
                        var tr = "";
                        for (var i = 0; i < data.pageBean.list.length; i++) {
                            var room = data.pageBean.list[i];
                            var flag;
                            if (room.rAllowDiscount == true) {
                                flag = "是";
                            } else {
                                flag = "否";
                            }
                            tr = "<tr>" +
                                    "<td>" + room.rId + "</td>" +
                                    "<td>" + room.rName + "</td>" +
                                    "<td>" + room.rType.rtName + "</td>" +
                                    "<td>" + room.rDesc + "</td>" +
                                    "<td>" + room.rRepertory + "</td>" +
                                    "<td>" + room.rOriginalPrice + "</td>" +
                                    "<td>" + room.rPresentPrice + "</td>" +
                                    "<td>" + flag + "</td>" +
                                    "<td><a href='#' class='tablelink'><label class='modify' roomNum='" + room.rId + "'>修改</label></a> <a href='#' class='tablelink'><label class='delete' rId='" + room.rId + "'> 删除</label></a></td>" +
                                    "</tr>";
                            tbody.append(tr);
                        }
                        $(".pagin").show();//显示翻页

                        //点击修改显示修改框
                        $(".modify").click(function () {
                            var id = $(this).attr("roomNum");
                            $("#roomNum").val(id);
                            alert(id);
                            $("#modifyDiv").css("display","block");
                        });

                        //点击删除显示删除的div
                        $(".delete").click(function () {
                            var id = $(this).attr("rId");
                            alert(id);
                            $("#deleteDiv").css("display", "block");
                            //点击确认删除
                            $("#deleteOK").click(function () {
                                $.ajax({
                                    type: "post",
                                    url: "http://localhost:8080/roomController/deleteRoomByIdHotelId",
                                    data: {"rId": id},
                                    dataType: "json",
                                    success: function () {
                                        if (data.success) {
                                            alert("删除成功");
                                            window.location.reload();//刷新页面
                                        } else {
                                            alert("删除失败");
                                            window.location.reload();//刷新页面
                                        }
                                    },
                                    error: function () {
                                        alert("访问错误");
                                    },
                                });
                            });
                        });

                    } else {
                        alert("没有查到房间信息");
                        $("#tbody").html("");//清空数据
                        $(".pagin").hide();//隐藏翻页
                    }

                },
                error: function () {
                    alert("访问错误！");
                }
            });
        }


        //下拉框内容改变事件
        var rtId;
        $("#select").change(function () {
            rtId = $(this).val();
            getPage(1, rtId);
        });

        //获取房间类型信息
        //获取顶部下拉框
        $.ajax({
            type: "post",
            url: "http://localhost:8080/roomTypeController/queryRoomTypeByHid",
            datatype: "json",
            success: function (data) {
                var select = $(".dingbu");//选择框
                select.html("");//清除以前的数据
                var option = "";
                for (var j = 0; j < data.roomTypes.length; j++) {
                    option = "<option value='" + data.roomTypes[j].rtId + "'>" + data.roomTypes[j].rtName + "</option>";
                    select.append(option);
                }
            },
            error: function () {
                alert("没有获取值");
            },
        });

        //添加房间信息
        $("#addButton").click(function () {
            $("#addDiv").css("display", "block");
            $("#addOK").click(function () {
                var form = $("#addForm").serialize();
                $.ajax({
                    data: form,
                    type: "post",
                    url: "http://localhost:8080/roomController/addRoomByHotelId",
                    dataType: "json",
                    success: function (data) {
                        if (data != null && data != "") {
                            console.log("后台传来的数据：" + data)
                            window.location.reload();//刷新页面
                        }
                    },
                    error: function () {
                        alert("访问错误！");
                    }
                });
            });
            $("#cancel").click(function () {
                $(".addDiv").css("display", "none");
            });
        });

        //点击确认修改
        $("#mook").click(function () {
            var form = $("#modifyForm").serialize();
            $.ajax({
                type: "post",
                url: "http://localhost:8080/roomController/updateRoomInfoByHoteId",
                data: form,
                dataType: "json",
                success: function (data) {
                    if (data.success) {
                        alert("修改成功");
                        window.location.reload();//刷新页面
                    } else {
                        alert("修改失败");
                        window.location.reload();//刷新页面
                    }
                },
                error: function () {
                    alert("访问错误");
                },
            });
        });
        $("#mono").click(function () {
            $("#modifyDiv").css("display", "none");
        });

        // //获取房间信息的请求
        // $.ajax({
        //     type:"post",
        //     url:"http://localhost:8080/roomController/selectRoomsByHotelIdAndRoonTypeId",
        //     dataType:"json",
        //     success:function (data) {
        //         console.log("后台响应数据：" + data);
        //         var tbody = $("#tbody");//表格
        //         var tr = "";//行
        //         tbody.html("");//清除以前的数据
        //         for(var i=0;i<data.rooms.length;i++){
        //             tr="<tr>"+
        //                     "<td>"+data.rooms[i].rId+"</td>"+
        //                     "<td>"+data.rooms[i].rName+"</td>"+
        //                     "<td>"+data.rooms[i].rType.rtName+"</td>"+
        //                     "<td>"+data.rooms[i].rDesc+"</td>"+
        //                     "<td>"+data.rooms[i].rRepertory+"</td>"+
        //                     "<td>"+data.rooms[i].rOriginalPrice+"</td>"+
        //                     "<td>"+data.rooms[i].rPresentPrice+"</td>"+
        //                     "<td>"+data.rooms[i].rAllowDiscount+"</td>"+
        //                     "<td><a href='#' class='tablelink'><label class='modify' roomNum='"+data.rooms[i].rId+"'>修改</label></a><a href='#' class='tablelink'><label class='delete' rId='"+data.rooms[i].rId+"'>删除</label></a></td>"+
        //             "</tr>";
        //             table.append(tr);
        //         }
        //         console.log("后台响应数据："+data);
        //         //点击修改显示修改框
        //         $(".modify").click(function () {
        //             var id = $(this).attr("roomNum");
        //             $("#roomNum").val(id);
        //             alert(id);
        //             $(".modifyDiv").css("display","block");
        //             $("#mook").click(function () {
        //                 var form = $("#modifyForm").serialize();
        //                 $.ajax({
        //                     type:"post",
        //                     url:"http://localhost:8080/roomController/updateRoomInfoByHoteId",
        //                     data:form,
        //                     dataType:"json",
        //                     success:function (data) {
        //                         if(data.success){
        //                             alert("修改成功");
        //                             window.location.reload();//刷新页面
        //                         }else{
        //                             alert("修改失败");
        //                             window.location.reload();//刷新页面
        //                         }
        //                     },
        //                     error:function () {
        //                         alert("访问错误");
        //                     },
        //                 });
        //             });
        //             $("#mono").click(function () {
        //                 $(".modifyDiv").css("display","none");
        //             });
        //         });
        //
        //         //删除房间信息
        //         $(".delete").click(function () {
        //             var id=$(this).attr("rId");
        //             alert(id);
        //             $(".deletediv").css("display","block");
        //             $("#deok").click(function () {
        //                 $.ajax({
        //                     type:"post",
        //                     url:"http://localhost:8080/roomController/deleteRoomByIdHotelId",
        //                     data:{"rId":id},
        //                     dataType:"json",
        //                     success:function () {
        //                         if(data.success){
        //                             alert("删除成功");
        //                             window.location.reload();//刷新页面
        //                         }else{
        //                             alert("删除失败");
        //                             window.location.reload();//刷新页面
        //                         }
        //                     },
        //                     error:function () {
        //                         alert("访问错误");
        //                     },
        //                 });
        //             });
        //             $("#deno").click(function () {
        //                 $("#deletediv").css("display","none");
        //             })
        //         });
        //     },
        //     error:function () {
        //         alert("访问错误！");
        //     }
        // });
        //
        //
        // //确认修改房间信息
        // $("#modifyOK").click(function () {
        //
        //     $.ajax({
        //         data:form,
        //         type:"post",
        //         url:"http://localhost:8080/roomController/updateRoomInfoByHoteId",
        //         dataType:"json",
        //         success:function (data) {
        //             if(data.success){
        //                 $("#modifyDiv").hide();//隐藏修改框
        //                 window.location.reload();//刷新当前页面
        //             }else{
        //                 alert("修改失败！" + data.errMsg);
        //             }
        //         },
        //         error:function () {
        //             alert("访问错误！");
        //         }
        //     });
        // });
        //
        //
        // //获取顶部下拉框
        // $.ajax({
        //     type:"post",
        //     url:"http://localhost:8080/roomTypeController/queryRoomTypeByHid",
        //     datatype:"json",
        //     success:function (data) {
        //         var select = $(".dingbu");//选择框
        //         select.html("");//清除以前的数据
        //         var option = "";
        //         for(var j = 0;j<data.roomTypes.length;j++){
        //             option = "<option value='"+data.roomTypes[j].rtId+"'>"+data.roomTypes[j].rtName+"</option>";
        //             select.append(option);
        //         }
        //         //选择下拉框后过滤显示
        //        /* document.getElementById("input").value=document.getElementById("dingbu").value*/
        //     },
        //     error:function () {
        //         alert("没有获取值");
        //     },
        // });


    </script>


</body>
</html>
